<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级管理</title>
    <script src="js/base.js"></script>
    <link rel="stylesheet" href="css/classmanage.css">
</head>

<body>
    <!-- <h1>班级管理</h1> -->
    <div class="classmanage">
        <div class="header">
            <span><i></i>班级管理</span>
            <div>
                <input type="text" placeholder="请输入班级名称" id="classnames">
                <input type="date" placeholder="开始时间" id="sertdate">---
                <input type="date" placeholder="结束时间" id="enddate">
                <button onclick="serch()">搜索</button>
            </div>
            <img src="images/加号.png" alt="" onclick="openadd()">
        </div>
        <div class="classtable">
            <table border="0">
                <thead>
                    <tr>
                        <th>班级序号</th>
                        <th>班级名称</th>
                        <th>班级人数</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>班级老师</th>
                        <th>班级状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="pageListTableBody">
                </tbody>
            </table>
            <div id="pages">
                <span id="spanFirst">首页</span>
                <span id="spanPre">上一页</span>
                <span id="spanNext">下一页</span>
                <span id="spanLast">尾页</span>
                <!-- 创建盒子存放第几页和总共几页 -->
                第<strong id="spanPageNum"></strong>页/共<strong id="spanTotalPage"></strong>页
            </div>
        </div>
        <!-- 弹出添加班级弹窗 -->
        <div class="addopen">
            <div>
                <b>添加班级</b>
                <form>
                    <p>班级名称: <input type="text" id="class"><br>
                        <span>
                            班级负责人: <select name="" id="sele" class="user">
                                
                            </select>
                        </span></p>
                    <p>开始时间: <input type="date" class="classdate"><br>结束时间: <input type="date" class="endtime"></p>
                </form>
                <span>
                    <button onclick="addclass()">确认</button>
                    <button onclick="offopen()">取消</button>
                </span>
            </div>
        </div>
        <!-- 单击修改弹出修改弹窗 -->
        <div class="open">
            <div>
                <b>修改班级</b>
                <form>
                    <p>班级名称: <input type="text" class="name"><br>
                        <span>
                            班级负责人: <select name="" id="sele" class="user">
                                
                            </select>
                        </span></p>
                    <p>开始时间: <input type="date" class="settime"><br>结束时间: <input type="date" id="endtime"></p>
                </form>
                <span>
                    <button onclick="update()">确认</button>
                    <button onclick="offrev()">取消</button>
                </span>
            </div>
        </div>
        <div class="del">
            <div style="height: 25%;">
                <b>删除班级</b>
                <h3 style="width: 100%;height: 60px;text-align: center;line-height: 60px;">是否删除当前班级</h3>
                <span>
                    <button onclick="delclass(this)">确认</button>
                    <button onclick="offdel()">取消</button>
                </span>
            </div>
        </div>
    </div>
    <script src="js/classmanage.js"></script>
</body>

</html>